<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动效果(四位数随机滚动)</title>
    <style>
      .container {
        width: 500px;
        margin: 100px auto;
        display: flex;
      }
      .box {
        width: 50px;
        height: 20px;
        font-size: 16px;
        overflow: hidden;
        text-align: center;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
      }
      .item {
        animation: scroll 2s linear infinite;
      }
      @keyframes scroll {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-1000%);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box" id="box1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
      </div>
      <div class="box" id="box2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
      </div>
      <div class="box" id="box3">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
      </div>
      <div class="box" id="box4">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
      </div>
    </div>

    <script>
      function resetAndSetBox(boxId, innerHTML, animation) {
        const box = document.getElementById(boxId)
        const items = box.querySelectorAll('.item')
        items.forEach(item => {
          item.style.animation = animation
        })
        box.innerHTML = innerHTML
      }

      setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 10) + 1
        resetAndSetBox('box1', randomNum, 'none')
      }, 2000)

      setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 10) + 1
        resetAndSetBox('box2', randomNum, 'scroll 2s linear infinite')
      }, 4000)

      setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 10) + 1
        resetAndSetBox('box3', randomNum, 'scroll 2s linear infinite')
      }, 6000)

      setTimeout(() => {
        const randomNum = Math.floor(Math.random() * 10) + 1
        resetAndSetBox('box4', randomNum, 'scroll 2s linear infinite')
      }, 8000)
    </script>
  </body>
</html>
